import { View } from "@tarojs/components";
import { Header, Paragraph } from "@/components";
import style from "./index.module.scss";
import { formatDateString } from "@/utils";
import { DateShape } from "@/data/shared/timeTypes";
import { navigateTo } from "@/utils/navigation";
import { requestSubscribeMessage } from "@/store/userDataContext";
import notifications from "@/data/notifications";

interface GiftCertificateCardProps {
  title: string;
  id: number;
  colorTheme: {
    mainColor: string;
    upperTriangle: string;
    lowerTriangle: string;
  };
  endTime: DateShape;
  showDetailLink?: boolean;
  type?: "small" | "default";
  popup?: boolean;
  handleClickCallback?: Function;
}

export const C37GiftCertificateCard = ({
  title,
  id,
  showDetailLink = true,
  endTime,
  colorTheme,
  type = "default",
  popup = false,
  handleClickCallback,
}: GiftCertificateCardProps) => {
  return (
    <View
      className={`${style.giftcert} ${type === "small" ? style.small : null}`}
    >
      {/* Content-section */}
      <View className={style.content}>
        {/* Extra View just for flexbox-spacing */}
        <View>
          <Paragraph noSpacing>礼品卡</Paragraph>
          <Header
            type="heading-n"
            color={colorTheme.mainColor}
            className={style["giftcert-title"]}
          >
            {title}
          </Header>
          <View className={style["giftcert-expire"]}>
            <View className={style["tag"]}>有效期</View>
            <Paragraph noSpacing className={style["expiry-date"]}>
              {formatDateString(endTime)}
            </Paragraph>
          </View>
        </View>
        {/* Extra View just for flexbox-spacing */}
        {showDetailLink && (
          <View
            onClick={() => {
              const cb = () => {
                handleClickCallback && handleClickCallback(true);
                navigateTo(`pages/user-gift-certificates-detail/index?id=${id}`);
              }
              if (!popup) {
                requestSubscribeMessage([
                  notifications.giftCard.expireSoon
                ], cb)
              } else {
                cb()
              }
              ;
            }}
          >
            <View className={style["giftcert-view-link"]}>查看或赠送</View>
          </View>
        )}
      </View>

      {/* Geometric ornaments */}
      <View className={style["ornament-background"]} />
      <View
        className={style["ornament-polygon"]}
        style={{ backgroundColor: colorTheme.mainColor }}
      />
      <View
        className={style["ornament-triangle-top"]}
        style={{ backgroundColor: colorTheme.upperTriangle }}
      />
      <View
        className={style["ornament-triangle-bottom"]}
        style={{ backgroundColor: colorTheme.lowerTriangle }}
      />
    </View>
  );
};
